<script setup>
import { useRouter } from 'vue-router'
import { useState } from '@/hooks/useState'

const { state } = useState()
const props = defineProps({
  items: {
    type: Array,
    default: () => []
  }
})
const router = useRouter()

function handleClick(item) {
  let url = `http://gantanhao.vip/webapp/merchant/templet1.html?share_id=${item.shop_id}&id=${item.id}`
  if(state.config.buyurl) {
    url = state.config.buyurl.replace(/\[\w+\]/img, function(matchs) {
      var returns = item[matchs.replace(/(\[|\])/g, "")];
      return returns
    })
  }
  router.push({
    path: '/other',
    query: {
      src: url,
      share_id: item.shop_id,
      id: item.id,
      title: item.title
    }
  })
}
</script>

<template>
  <van-empty v-if="!items.length" description="暂无数据" />
  <div v-else class="list-row" v-for="item in items" :key="item.id" @click="handleClick(item)">
    <img class="cover" :src="item.image1" />
    <div class="content">
      <div class="header">
        <span v-if="state.config?.product?.text0" class="shouquan">{{ state.config?.product?.text0 }}</span>
        <span>{{ item.title }}</span>
      </div>
      <div><span v-if="state.config?.product?.text1">{{ state.config?.product?.text1 }}</span></div>
      <div class="footer">
        <div style="display: flex; align-items: center; flex-wrap: wrap;">
          <span v-if="state.config?.product?.text2" class="shoujia">{{ state.config?.product?.text2 }}</span>
          <van-tag type="danger" round plain size="medium" style="margin: 0 4px;" v-for="tag in item.selling_point.slice(0, 1)" :key="tag">{{ tag }}</van-tag>
        </div>
        <van-button style="flex-shrink: 0;" round type="success" size="mini">免费领取</van-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.list-row {
  position: relative;
  display: flex;
  align-items: center;
  height: 80px;
  padding: 8px 3% 12px;
  border-top: 1px solid #eee;
  .cover {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .content {
    height: 80px;
    padding: 0 0 0 10px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 14px;
    .header {
      // margin-bottom: 10px;
    }
    .shouquan {
      background-color: #ff0000;
      font-size: 12px;
      color: white;
      line-height: 14px;
      padding: 2px 6px;
      border-radius: 5px;
      margin-right: 8px;
      position: relative;
    }
    .shoujia {
      color: #ff0000;
      font-size: 16px;
      font-weight: bold;
      margin-right: 10px;
    }
    .footer {
      margin-top: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
</style>
